/**
 * Created by levy on 16/6/15.
 */
/**
 * 单击得值,再点击则无值的radio. 值存储在 data-value中, 最终需要用js获取
 *
 * 传参格式
 * addClass: add more class
 * param: {
     *      name: 该 name 与 id 都 叫这个
     *      text: 显示的文字
     *      value: 选中后应存储的值. 可使用 $('#{name}').data('value') 获取
     *             其中 {name} 表示传过来的name
     *      active: 是否是激活状态,即默认选中
     *      selectCount: 允许选中数量,不传则认为可全选
     * }
 */
var Radio = React.createClass({
    getInitialState() {
        return {
            hasActive: false, //只激活一次
        }
    },
    propTypes: {
        active: React.PropTypes.bool.isRequired,
    },
    render() {
        let props = this.props,
            name = props.name,
            text = props.text;

        return (
            <span ref="radio" name={name} id={name}
                  className={"lf-radio mui-btn " + (this.props.addClass || '')}>{text}</span>
        )
    },
    componentDidMount(){
        var $radio = $(React.findDOMNode(this.refs.radio));

        $radio.on('touchstart', () => this.setupValue($radio));
    },
    componentWillReceiveProps(nextProps) {
        var hasActive = this.state.hasActive;
        if(nextProps.active && !hasActive){
            $(React.findDOMNode(this.refs.radio)).trigger('touchstart');
            this.setState({hasActive: true});
        }
    },
    setupValue($radio) {
        var value = this.props.value || 0,
            total = this.props.selectCount || 999,
            selected = $radio.siblings('.active').length;

        if($radio.hasClass('active')){
            if(total != 1) //单选已选中时,不能取消, 可以参数shopping/item-detail.js
                $radio.removeAttr('data-value').toggleClass('active');
        }
        //单选选中
        else if(total == 1){
            $radio.attr('data-value', value).toggleClass('active')
                .siblings('.active').removeClass('active');
        }
        //多选选中
        else if(++selected <= total){
            $radio.attr('data-value', value).toggleClass('active');
        }
    }
});

export default Radio;